<template>
  <div class="flowbar-charts-components">
    <div class="flowbar-charts-wrapper">
      <chart :options="computedBarChartOption"
             :init-options="initOptions"
             :theme="theme"
             auto-resize
             class="echarts-item"
             ref="domBarChart">
      </chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/graphic'
import 'echarts/lib/chart/line'
import options from './echartsOptions.js'

const DEFAULT_TIME_UNIT = '时'

const areadata = {
  '1': {
    id: 1,
    name: '办公室',
    shop_id: 1,
    points: [
      [18, 18],
      [171, 18],
      [171, 123],
      [18, 123]
    ],
    center: [85.5, 61.5]
  },
  '2': {
    id: 2,
    name: '茶水间',
    shop_id: 1,
    points: [
      [187, 16],
      [347, 16],
      [347, 117],
      [187, 117]
    ],
    center: [258, 57.5]
  },
  '3': {
    id: 3,
    name: '入口',
    shop_id: 1,
    points: [
      [357, 17],
      [651, 17],
      [651, 94],
      [357, 94]
    ],
    center: [495, 46]
  },
  '4': {
    id: 4,
    name: '研发中心',
    shop_id: 1,
    points: [
      [18, 160],
      [347, 160],
      [347, 419],
      [18, 419]
    ],
    center: [173.5, 280.5]
  },
  '5': {
    id: 5,
    name: '支持中心',
    shop_id: 1,
    points: [
      [357, 160],
      [479, 160],
      [479, 419],
      [357, 419]
    ],
    center: [409, 280.5]
  },
  '6': {
    id: 6,
    name: '会议室',
    shop_id: 1,
    points: [
      [504, 110],
      [647, 110],
      [647, 425],
      [504, 425]
    ],
    center: [566.5, 258.5]
  }
}

export default {
  name: 'flowbar-charts-components',

  components: {
    chart: ECharts
  },

  props: {
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 24
    },
    barData: {
      default: null
    }
  },

  data () {
    return {
      options,
      theme: 'dark',
      initOptions: {
        renderer: 'canvas'
      },
      barChartSize: {}
    }
  },

  computed: {
    computedBarChartOption () {
      // option xAxis轴
      let initOptions = options
      let timeFrame = []
      for (var i = this.endTime; i >= this.startTime; i--) {
        const label = i + DEFAULT_TIME_UNIT
        timeFrame.unshift(label)
      }
      initOptions.xAxis.data = timeFrame
      // option legend
      const areaIdArr = this.barData === null ? [] : Object.keys(this.barData)
      let legendData = []
      let series = []
      for (let i = 0; i < areaIdArr.length; i++) {
        const id = areaIdArr[i]
        const areaName = areadata[id]['name']
        legendData.push(areaName)
        let formatObject = {
          type: 'line',
          smooth: true
        }
        if (!this.barData && !Object.keys(this.barData).length) {
          break
        }
        let formatArray = new Array(timeFrame.length).fill(0)
        for (let i = 0; i < this.barData[id].length; i++) {
          const data = this.barData[id][i]
          const inx = data['stats_hour'] - this.startTime
          const val = data['customer_num']
          formatArray[inx] = val
        }
        series.push(Object.assign({}, formatObject, { name: areaName }, { data: formatArray }))
      }
      initOptions.legend.data = legendData
      initOptions.series = series
      /**
       * [if description] 如果没有图表数据的时候, 显示tooltip
       * @param  {Number} initOptions.series[0]['data'].length [description]
       */
      initOptions.graphic[0]['style']['fill'] = (!!this.barData && !!Object.keys(this.barData).length) ? 'transparent' : '#000'
      initOptions.xAxis.show = (!!this.barData && !!Object.keys(this.barData).length)
      initOptions.xAxis.axisLine.show = (!!this.barData && !!Object.keys(this.barData).length)
      initOptions.tooltip.show = (!!this.barData && !!Object.keys(this.barData).length)
      // console.log('initOptions: ', initOptions)
      return initOptions
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  // scoped
  .flowbar-charts-components {
    height: 100%;
    overflow: hidden;
    .flowbar-charts-wrapper {
      position: relative;
      height: 100%;
      .echarts-item {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
</style>
